﻿
/*图片轮播*/



#topcenterfist {
    height: 620px;
    width: 100%;
    margin-top:68px;
}

#playBox {
    width: 100%; 
    height: 500px;
    margin: auto;
    background: #333;
    position: relative;
    overflow: hidden;
}

    #playBox .oUlplay {
        width: 600%;
        padding:0;
        position: absolute;
        left: 0;
        top: 0;
    }
        #playBox .oUlplay li {
            float: left;
           width:16.7%;
            height: 500px;
            list-style:none;
        }
     

    #playBox .smalltitle {
        width: 100%;
        height: 10px;
        position: absolute;
        bottom: 15px;
        z-index: 10
    }

        #playBox .smalltitle ul {
            width: 140px;
            margin: 0 auto;
        }

            #playBox .smalltitle ul li {
                width: 10px;
                height: 10px;
                margin: 0 5px;
                border-radius: 10px;
                background: #ffffff;
                float: left;
                overflow: hidden;
                cursor: pointer;
            }

        #playBox .smalltitle .thistitle {
            background: #69aaec;
        }

    #playBox .pre {
        cursor: pointer;
        width: 1px;
        height: 45px;
        position: absolute;
        top: 150px;
        left: 10px;
        z-index: 10;
        text-align: center
    }

    #playBox .next {
        cursor: pointer;
        width: 25px;
        height: 45px;
        position: absolute;
        top: 150px;
        right: 10px;
        z-index: 10;
        text-align: center
    }

    #playBox ul li img {
        width: 100%;
        height: 500px;
    }
/*图片浮动*/
#playBox #center-imgfd {
    border:1px solid black;
    width:1200px;
    height:450px;
    overflow:hidden;
    z-index:100;
   
   margin:auto;
}
    #playBox #center-imgfd ul {
    margin-top:120px;
    
    }
        #playBox #center-imgfd ul li {
           
            list-style: none;
            animation: lefteaseinAnimate 1s ease 1; /*调用已定义好的动画lefteaseinAnimate，全程运行时间1S，进入的速度曲线为ease，只播放一次*/
            -webkit-animation: lefteaseinAnimate 1s ease 1;
            -ms-animation: lefteaseinAnimate 1s ease 1;
            -o-animation: lefteaseinAnimate 1s ease 1;
            -moz-animation: lefteaseinAnimate 1s ease 1;
            /*规定动画的最后状态为结束状态*/
            animation-fill-mode: forwards;
            -webkit-animation-fill-mode: forwards;
            -o-animation-fill-mode: forwards;
            -ms-animation-fill-mode: forwards;
            -moz-animation-fill-mode: forwards;
        }
            #playBox #center-imgfd ul li.imgfd-a {
                font-weight: bold;
                font-family: 微软雅黑;
                font-size: 20px;
                line-height: 20px;
           
                color: rgb(255, 255, 255);
                margin-bottom: 20px;
            }
            #playBox #center-imgfd ul li.imgfd-b {
                font-weight: bold;
                font-family: 微软雅黑;
                font-size: 50px;
                line-height: 50px;
                color: rgb(255, 255, 255);
                letter-spacing: 2px;
                margin-bottom: 20px;
            }
            #playBox #center-imgfd ul li.imgfd-c {
                font-family: 微软雅黑;
                font-size: 14px;
                line-height: 20px;
                color: rgb(255, 255, 255);
                margin-bottom: 30px;
                width: 430px;
            }
            #playBox #center-imgfd ul li.imgfd-d {
                font-family: 微软雅黑;
                font-size: 18px;
                line-height: 20px;
                color: rgb(255, 255, 255);
                margin-bottom: 20px;
            }
/*定义一个名字为lefteaseinAnimate动画，实现从页面的左边淡入页面效果*/
@keyframes lefteaseinAnimate {
    0% {
        transform: translateX(-2000px);
        opacity: 0;
    }
    /*在0%时设置文字在想X轴-2000px位移处（左边），透明度为0，也就是看不见文字*/
    100% {
        transform: translateX(0px);
        opacity: 1;
    }
    /*在100%时设置文字在想X轴0px位移处，也就是原始布局的位置，透明度为1，也就是文字可以看见了*/
}

@-webkit-keyframes lefteaseinAnimate {
    0% {
        -webkit-transform: translateX(-2000px);
        opacity: 0;
    }

    100% {
        -webkit-transform: translateX(0px);
        opacity: 1;
    }
}

@-o-keyframes lefteaseinAnimate {
    0% {
        -webkit-transform: translateX(-2000px);
        opacity: 0;
    }

    100% {
        -webkit-transform: translateX(0px);
        opacity: 1;
    }
}

@-ms-keyframes lefteaseinAnimate {
    0% {
        -webkit-transform: translateX(-2000px);
        opacity: 0;
    }

    100% {
        -webkit-transform: translateX(0px);
        opacity: 1;
    }
}

@-moz-keyframes lefteaseinAnimate {
    0% {
        -webkit-transform: translateX(-2000px);
        opacity: 0;
    }

    100% {
        -webkit-transform: translateX(0px);
        opacity: 1;
    }
}




/*中部标题*/
#center-tmb {
  width:100%;
  text-align:center;
  margin-top:-100px;

}

    #center-tmb .a p {
        width: 1200px;
        font-family: 微软雅黑;
        text-align: center;
        margin: 14px auto;
        line-height: 30px;
        font-size: 25px;
        /*color: rgb(51, 51, 51);*/
        letter-spacing: 2px;
        color: #333;
        font-weight: 700;
    }

    #center-tmb .b {
        margin: auto;
        /*padding-left: 50px;*/
        height: 260px;
        background-color: transparent;
        background-position: center center;
        background-color: #F6F6F6;
        width: 100%;
    }
    #center-tmb .c {

        position:absolute;
        margin:auto;
        overflow: hidden;
        animation-name: c;
        animation: c 2s alternate;
        -webkit-animation: c 3s alternate;
        -moz-animation: c 2s alternate infinite;
        animation-delay: 2s; /*延迟时间;*/
        animation-iteration-count: 1; /*循环次数;*/
        /*animation-duration: 2s;*/
        /*animation-direction: reverse;*/ /*反向播放动画*/
        width: 100%;
    }


    #center-tmb .b ul {
        width: 1200px;
        margin: auto;
   
  
    }
    #center-tmb .b ul li {
        float: left;
      margin-top:30px;
        list-style: none;
        /*text-align: center;*/
        width:200px;
        margin-left:5px;
        margin-right:15px;
        /*margin-left: 20px;*/
    }

        #center-tmb .b ul li img {
          
        
            z-index: 1;
      
            /*margin-right: 20px;*/
        }
        #center-tmb .b ul li a {
         text-decoration:none;
         
        }
        #center-tmb .b ul li a img.img {
            transition: all 0.6s;
            cursor: pointer;
            position: relative;
        }

            #center-tmb .b ul li  img:hover {
                transform: scale(1.1);
                z-index: 999;
                opacity: 0.9;
            }
        #center-tmb .b ul li span {
            line-height: 30px;
            
            color: black;
            z-index: 1000;
            height: 15px;
            /*color: rgb(255, 255, 255);*/
        }
#center-tmb .b ul li span:hover {
                color: #f6ab36 !important;
            }
            /*图片飞入效果*/
            @-webkit-keyframes c {
                0% {
        left: -1500px;
        /*top: 500px;*/
   
    }
    100% {
        left:0px;
        opacity:1;
        /*top: 50px;*/
        /*left: 50%;*/
        /*margin-left: -95px;*/
    }
}
/*优势部分*/
#centerd-ys {

    height:500px;
    width: 100%;
    margin: auto;
    padding-top: 10px;
    /*background-color: #f8eded;*/
}
    #centerd-ys #ysddd {
        margin: auto;
        width: 1200px;
        font-size: 25px;
        text-align: center;
        color: #333;
        font-weight: 700;
    }
    #centerd-ys #ysa {
        margin: auto;
        width: 1200px;
        height: 531px;
        
    }
    #centerd-ys h1 {
        position:absolute;
        font-size: 80px;
        color: rgb(243, 243, 243);
        z-index: 1;
        margin-top:-50px;
    }
    #centerd-ys ul {
        width: 1200px;
        
    }
    #centerd-ys ul li {
        /*position: relative;*/
        z-index: 10;
        list-style: none;
        margin-bottom: 20px;
    }
        #centerd-ys ul li.a {
            font-size: 30px;
            font-family: 微软雅黑;
            color: rgb(18, 18, 18);
            font:bold;
            margin-top:100px;
        }
        #centerd-ys ul li.b {
            font-family: 微软雅黑;
            font-size: 14px;
            color: rgb(18, 18, 18);
            line-height: 25px;
            width: 400px;
        }
        #centerd-ys ul li.c dl dt {
            float: left;
            margin-top: -5px;
            height: 120px;
        }
        #centerd-ys ul li.e dl dt {
            float: left;
            margin-top: -5px;
            height: 120px;
            margin-left:-50px;
        }
       
        #centerd-ys ul li.d dl dt {
            float: left;
            margin-top: -5px;
            height: 120px;
        }
        #centerd-ys ul li dl dd {
        width:400px;
        }
        #centerd-ys ul li.c dl dd {
            color: rgb(153, 153, 153);
            margin-top: 7px;
        }

        #centerd-ys ul li.e dl dd {
            color: rgb(153, 153, 153);
            margin-top: 7px;
            padding-left: 50px;
        }

        #centerd-ys ul li.d dl dd {
            color: rgb(153, 153, 153);
            margin-top: 7px;
        }
        #centerd-ys #ysb img {
       float:right;
       margin-right:50px;
        z-index:100;
        margin-top:-450px;
    
        }
/*业务板块*/
#centere-yw-div {
    width: 100%;
    height: 300px;
    background-color: transparent;
    background-position: center center;
    background-image: url('../Imges/c.png');
    background-repeat: no-repeat;
    margin: auto;
    margin-top: -100px;
    opacity: 0.2;
    position:absolute;
    z-index:1;
    margin-top:-60px;
}
#centere-yw {
    width: 100%;
    height: 300px;
    background-color: transparent;
    margin:auto;
    margin-top: -60px;
    position:relative;
    z-index:10;
}
    #centere-yw ul {
    width:1200px;
    margin:auto;
    margin-top:50px;


    }
        #centere-yw ul li {
            list-style: none;
            float: left;
            width: 390px;
           
            margin: auto;
            margin-left:-10px;

        }

            #centere-yw ul li dl dd {
                width: 380px;
                margin: auto;
                padding-left: 30px;
                color: #999999;
            }
      
            #centere-yw ul li dl dt {
                float: left;
                margin-left:150px;
                margin-right:10px;
                
            }
  #ywb {
    width:1300px;
    height:300px;
    margin:auto;
    }
#ywb img {

      margin:auto;
      margin-top:-300px;
    }
/*新闻动态*/




    /*#centere-xw h1 {
        margin:auto;
        width:1200px;
        font-size: 80px;
        color: rgb(243, 243, 243);
        text-align:center;
           z-index:0;
           margin-top:-0px;
        
    }*/
    /*#centere-xw  p {
        margin: auto;
        width: 1200px;
        font-size: 30px;
        font-family: 微软雅黑;
        color: rgb(18, 18, 18);
        text-align: center;
        position:relative;
        z-index:100;
        margin-top:-50px;
     
    }*/
#centere-xw {
    width: 1200px;
    margin: auto;
    
    height:630px;

    margin-top:180px;
    
}

    #centere-xw #xwddd {
        margin: 17px auto;
        width: 1200px;
        font-size: 25px;
        text-align: center;
        height: 120px;
        font-weight: 700;
    }
    #centere-xw div ul {
        width: 1200px;
        margin: auto;
        padding-left: 100px;
        margin-top: -30px;
       
        
    }
        #centere-xw div ul li {
            width: 325px;
            list-style: none;
            float: left;
            text-align: center;
            height: 230px;
            margin: auto;
            /*background-color: #f1f1f1;*/
     
       
            /*padding-left:50px;*/
        }
        #centere-xw div ul li  dl dt img{
          transition:all 0.6s;
          cursor:pointer;
          position:relative;
          width:300px;
          height:160px;
        }
        #centere-xw div ul li dl dt img:hover {
            transform:scale(1.1);
            z-index:999;
           
        }
            #centere-xw div ul li dl dd.a {
                display: inline-block;
                font-family: Microsoft YaHei;
                font-size: 10px;
                color: #5a5a5a;
                text-decoration: none;
                line-height: 30px;
                width: 300px;
                background-color: #f1f1f1;
               
            }
        #centere-xw div ul li dl dd:hover {
            color: #f6ab36;
        }
            #centere-xw div ul li dl dd.b {
                font-family: Microsoft YaHei;
                font-size: 12px;
               margin:auto;
               height:25px;
                color: #a8a8a8;
                font-weight: normal;
                text-decoration: none;
                width: 300px;
                background-color: #f1f1f1;
            }
        /*#centere-xw div ul li dl dd.c {
            line-height: 25px;
            display: inline-block;
            font-family: Microsoft YaHei;
            font-size: 14px;
            padding-top: 8px;
            color: #999999;
            font-weight: normal;
            text-decoration: none;
            margin-bottom: 10px;
            width: 300px;
        }*/
        #centere-xw div a {
        text-decoration:none;
        color:black;
        
        }
        #centere-xw div a:hover {
                color:aqua;
            }
